<template>
<div class="grid-x et-grid">

  <ul class="tabs et-tabs">
    <li v-for="(item, idx) in items" class="tabs-title" :key="idx">
      <a :aria-selected="idx === selectedIdx" @click="() => handler(idx, item.view)">{{ $t(item.txt) }}</a>
    </li>
  </ul>

  <template v-if="keepAlive">
    <div class="tabs-content">
      <div class="tabs-panel is-active">
        <keep-alive>
          <component v-bind:is="currentView"></component>
        </keep-alive>
      </div>
    </div>
  </template>

  <template v-else>
    <div class="tabs-content">
      <div class="tabs-panel is-active">
        <component v-bind:is="currentView"></component>
      </div>
    </div>
  </template>

</div>
</template>

<script>
export default {

  props: {
    items: {
      type: Array
    },
    keepAlive: {
      type: Boolean
    }
  },

  data() {
    return {
      selectedIdx: 0,
      currentView: this.items[0].view
    };
  },

  methods: {
    handler(idx, view) {
      this.selectedIdx = idx;
      this.currentView = view;
    }
  }

};
</script>
